<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="display: flex;justify-content: center">
        <span>混凝土对模板的侧向压力</span>
      </div>
      <div align="center">
        <label>`F=min[0.22*\gamma_c*t_0*\beta1*\beta2*V^\frac1 2]&[\gamma_c*H]`</label><br>
        <label>`其中，F -新浇混凝土对模板的最大侧压力(KN|m^2)`</label><br>
        <label>`\gamma_c - -混凝土的重力密度(KN|m^3) 取25KN|m^3`</label><br>
        <label>`t_0 - -新浇混凝土的初凝时间(h)`</label><br>
        <label>`V - -混凝土的浇筑速度(m|h)`</label><br>
        <label>`\beta1 - -外加剂影响修正系数，不掺外加剂时取1` </label><br>
        <label>`\beta2 - -混凝土塌落度影响系数，当塌落度小于30mm时，取0.85；50-90mm时取1；110-150mm时，取1.15`</label><br>
        <label>`H- -混凝土侧压力计算位置处至新浇混凝土顶面总高度H(m)`</label><br>
      </div>
      <div style="display:flex;justify-content:space-around;margin-top: 20px">
        <el-tag type="success" size="medium" class="input">混凝土的重力密度</el-tag>
        <el-input size="mini" class="input" v-model="muban.r" placeholder="请输入"></el-input>
        <el-tag type="success" size="medium" class="input">新浇混凝土的初凝时间</el-tag>
        <el-input size="mini" class="input" v-model="muban.t" placeholder="请输入"></el-input>
        <el-tag type="success" size="medium" class="input">混凝土的浇筑速度</el-tag>
        <el-input size="mini" class="input" v-model="muban.v" placeholder="请输入"></el-input>
      </div>
      <div style="display:flex;justify-content:space-around;margin-top: 20px">
        <el-tag type="success" size="medium" class="input">外加剂影响修正系数</el-tag>
        <el-input size="mini" class="input" v-model="muban.b1" placeholder="请输入"></el-input>
        <el-tag type="success" size="medium" class="input">混凝土塌落度影响系数</el-tag>
        <el-input size="mini" class="input" v-model="muban.b2" placeholder="请输入"></el-input>
        <el-tag type="success" size="medium" class="input">混凝土侧压力计算位置处至新浇混凝土顶面总高度</el-tag>
        <el-input size="mini" class="input" v-model="muban.h" placeholder="请输入"></el-input>
      </div>
      <div class="bottom">
        <el-button style="width: 300px;" type="danger" @click="deletemuBan">重置</el-button>
        <el-button style="width: 300px;" type="primary" @click="muBan">计算</el-button>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix" style="display: flex;justify-content: center">
        <span>土的三相组成比例</span>
      </div>
      <div align="center" class="math">
        <label>`V-土的总体积`</label><br>
        <label>`V_v-土的空隙部分总体积`</label><br>
        <label>`V_s--土的固体颗粒部分总体积`</label><br>
        <label>`V_w-土中水的体积`</label><br>
        <label>`V_a-土中气体的体积`</label><br>
        <label>`m-土的总体积` </label><br>
        <label>`m_v-土中孔隙流体总体积`</label><br>
        <label>`m_s-土的固体颗粒总体积`</label><br>
        <label>`m_w-土的水的质量`</label><br>
        <label>`m_a-土的气体质量`</label><br>
        <label>`p_w^(4。C)-4摄氏度纯蒸馏水的密度`</label><br>
        <label>`土的密度p_w=(m_s+m_w)/(V_s+V_w+V_a)`</label><br>
        <label>`土粒比重=(土的密度)/p_w^(4。C)`</label><br>
        <label>`土的含水量=(m_w*100%)/m_s`</label><br>
        <label>`土的孔隙比e=V_v/V_s`</label><br>
        <label>`土的孔隙率n=V_v/V`</label><br>
        <label>`土的饱和度S_r=V_w/V_v`</label><br>
        <label>`土的饱和密度P_sat=(m_s+V_v*p_w)/V`</label><br>
        <label>`土的饱和密度P_d=m_s/V`</label><br>
      </div>
      <div style="display:flex;justify-content:space-around;margin-top: 20px">
        <el-tag type="success" size="medium" class="input">土的空隙部分总体积</el-tag>
        <el-input size="mini" class="input" v-model="midu.vv" placeholder="请输入"></el-input>
        <el-tag type="success" size="medium" class="input">土的固体颗粒部分总体积</el-tag>
        <el-input size="mini" class="input" v-model="midu.vs" placeholder="请输入"></el-input>
        <el-tag type="success" size="medium" class="input">土中水的体积</el-tag>
        <el-input size="mini" class="input" v-model="midu.vw" placeholder="请输入"></el-input>
      </div>
      <div style="display:flex;justify-content:space-around;margin-top: 20px">
        <el-tag type="success" size="medium" class="input">土中气体的体积</el-tag>
        <el-input size="mini" class="input" v-model="midu.va" placeholder="请输入"></el-input>
        <el-tag type="success" size="medium" class="input">土的固体颗粒总体积</el-tag>
        <el-input size="mini" class="input" v-model="midu.ms" placeholder="请输入"></el-input>
        <el-tag type="success" size="medium" class="input">土的水的质量</el-tag>
        <el-input size="mini" class="input" v-model="midu.mw" placeholder="请输入"></el-input>
        <el-tag type="success" size="medium" class="input">4摄氏度纯蒸馏水的密度</el-tag>
        <el-input size="mini" class="input" v-model="midu.pw" placeholder="请输入"></el-input>
      </div>
      <div class="bottom">
        <el-button style="width: 300px;" type="danger" @click="deletemiDu">重置</el-button>
        <el-button style="width: 300px;" type="primary" @click="miDu">计算</el-button>
      </div>
    </el-card>
    <div>
      <el-dialog
        title="计算结果"
        :visible.sync="dialogVisible"
        width="30%">
        <span>
          {{title}}{{muban.g}}m
        </span>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="计算结果"
        :visible.sync="dialogVisible1"
        width="30%">
        <span>
          土的密度：{{midu.ps}}<br>
          土粒比重:{{midu.g}}<br>
          土的含水率：{{midu.w}}<br>
          土的孔隙比:{{midu.e}}<br>
          土的孔隙率:{{midu.n}}<br>
          土的饱和度:{{midu.s}}<br>
          土的饱和密度:{{midu.psat}}<br>
          土的干密度:{{midu.pd}}<br>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { muban, midu } from '@/api/tufang'
export default {
  name: 'Muban',
  data(){
    return{
      title:'',
      dialogVisible1:false,
      dialogVisible:false,
      muban:{
        r:'',
        t:'',
        v:'',
        b1:'',
        b2:'',
        h:'',
        g:''
      },
      midu:{
        vv:'',
        vs:'',
        vw:'',
        va:'',
        ms:'',
        mw:'',
        ps:'',
        g:'',
        w:'',
        e:'',
        n:'',
        s:'',
        psat:'',
        pd:'',
        pw:''

      }

    }
  },
  mounted() {
    // this.formatMath();
  },
  methods:{
    formatMath() {
      setTimeout(() => {
        this.$nextTick(() => {
          if (this.MathJax.isMathjaxConfig) {
            this.MathJax.initMathjaxConfig();
          }
          //这个地方的hello是对应要渲染数学公式的dom的class
          this.MathJax.MathQueue('math');
        })
      }, 500)
    },
    deletemuBan(){
      this.muban={
        r:'',
        t:'',
        v:'',
        b1:'',
        b2:'',
        h:'',
        g:''
      }
    },
    deletemiDu(){
      this.midu={
        vv:'',
        vs:'',
        vw:'',
        va:'',
        ms:'',
        mw:'',
        ps:'',
        g:'',
        w:'',
        e:'',
        n:'',
        s:'',
        psat:'',
        pd:'',
        pw:''
      }
    },
    miDu(){
        midu(this.midu).then(res=>{
          if (res){
            this.midu=res.data;
            this.dialogVisible1=true;
          }
        })
      },
    muBan() {
      muban(this.muban).then(res => {
        console.log(res)
        if (res) {
          this.title = '新浇混凝土对模板的最大侧压力为'
          this.muban = res.data;
          this.dialogVisible = true
        }
      })
    }
},

}
</script>

<style scoped>
.input{
  margin-right: 10px;
  /*width: 700px;*/
}
.box-card {
  /*width: 1000px;*/
  margin-top: 10px;
  border-radius: 30px;
}
.bottom{
  margin-top: 8px;
  display: flex;
  justify-content: center;
}
</style>
